<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>BMI Calculator</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div class="img">
		<img src="meter.png" alt="">

	
	<div class="block">
		<h1>BMI Calculator</h1>
		
		<p id="intro">Calculate your BMI (body mass index) by using the form below. Enter your weight and height and click the Calculate button to display your BMI result.</p>
		<form action="none" method="post" name="bmiform">
			<fieldset>
				<legend>Height and Weight</legend>
				<label for="pounds">Weight (pounds):</label>
				<input type="text" name="pounds" id="pounds">
				<br>
				<label for="inches">Height (inches):</label>
				<input type="text" name="inches" id="inches">
				<br>
				<button class="btn" type="button" name="calculate" value="Calculate your BMI" onclick="calcBMI()">Calculate your BMI</button>
			</fieldset>
			<fieldset class="bg">
				<legend>BMI</legend>
				<label for="bmi" id="bmi_label">Your calculated BMI is:</label>
				<input type="text" name="bmi" id="bmi" readonly="readonly">
			</fieldset>
		</form>
	</div>
</div>
	<script src="index.js"></script>
</body>
</html>
